<template>
	<div class="douyinhao">
		<div class="douyinhaonei">
			<div class="douyinhaonei1">
				<div class="pingtaihao1_1">
					<span>我的{{$store.state.pintaiName}}号</span>
				</div>
				<div class="tianjiadou">
					<span>添加{{$store.state.pintaiName}}号</span>
				</div>
				
				<div class="zonglan">
					<span>
						<i class="el-icon-user-solid"></i>
					</span>
					<span>总览</span>
				</div>
				
				<div class="quanbudou">
					全部(0)
				</div>
			</div>
			<div class="douyinhaonei2">
				<div class="darenliebiao">
					<div class="darenliebiao1">
						<div class="darenliebiao1_1">
							<span>达人列表</span>
						</div>
						<div class="xialadou">
							  <el-select v-model="value" clearable placeholder="全部">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>
						</div>
					</div>
					<div class="darenliebiao2">
						<div class="piliangdel">
							<i class="el-icon-delete"></i>批量删除
						</div>
						<div class="daochushuju">
							<i class="el-icon-share"></i>导出数据
						</div>
					</div>
				</div>
				
				<div class="shujudou">
					<img src="../../../assets/img/404.png" />
					<span>暂无抖音数据</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"douyinhao",
		data(){
			return{
				options: [{
				  value: '选项1',
				  label: '黄金糕'
				}, {
				  value: '选项2',
				  label: '双皮奶'
				}],
				value: ''
			}
		},
		mounted() {
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.douyinhao{
		
		.douyinhaonei{
			
			.douyinhaonei1{
				float: left;
				width: 20%;
				background-color: #fff;
				border-radius:0.1rem ;
				min-height: 84.1vh;
				padding: 0.2rem 0;
				box-sizing: border-box;
				
				.pingtaihao1_1{
					padding: 0 0.6rem;
					height: 100%;
					box-sizing: border-box;
					position: relative;
					
					span{
						font-size: 0.45rem;
						display: inline-block;
						margin-left:0.3rem ;
						color: #333333;
						letter-spacing: 0.05rem;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.4rem;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #0091FF;
					}
				}
				
				.tianjiadou{
					padding: 0 0.6rem;
					margin:0.7rem 0 ;
					span{
						border-radius:0.1rem ;
						cursor: pointer;
						border: 1px solid #D4D4D4;
						padding: 0.2rem 0.3rem;
						color: #0091FF;
						font-size: 0.4rem;
					}
				}
				
				.zonglan{
					background-color: rgba(0,145,255,0.1);
					padding: 0.3rem 0.6rem;
					margin-top:1rem ;
					
					span:nth-of-type(1){
						background-color: #0091FF;
						color: #fff;
						font-size: 0.55rem;
						width: 0.8rem;
						height: 0.8rem;
						border-radius:50% ;
						text-align: center;
						line-height: 0.8rem;
						display: block;
						float: left;
					}
					span:nth-of-type(2){
						line-height: 0.8rem;
						color: #333333;
						font-size: 0.45rem;
						display: block;
						float: left;
						margin-left:0.3rem ;
					}
				}
				.zonglan::after{
					content: "";
					display: block;
					clear: both;
				}
				
				.quanbudou{
					padding: 0.3rem 0.7rem;
					color: #333333;
					font-size: 0.45rem;
					margin:0.4rem 0 ;
				}
			}
			.douyinhaonei2{
				float: right;
				width: 78%;
				background-color: #fff;
				padding: 0.4rem 0.8rem;
				box-sizing: border-box;
				border-radius:0.1rem ;
				min-height: 84.1vh;
				
				.darenliebiao{
					.darenliebiao1{
						float: left;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.darenliebiao1_1{
							padding: 0 0.6rem;
							height: 100%;
							box-sizing: border-box;
							position: relative;
							
							span{
								font-size: 0.45rem;
								display: inline-block;
								margin-left:0.3rem ;
								color: #333333;
								letter-spacing: 0.05rem;
							}
							
							span::before{
								content: "";
								display: block;
								position: absolute;
								top: 0.4rem;
								left: 0;
								width: 0.3rem;
								height: 1rem;
								background-color: #0091FF;
							}
						}
						.xialadou{
							width: 3.5rem;
							margin-left:0.5rem ;
						}
					}
					.darenliebiao2{
						float: right;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text-align: center;
						padding-top:0.5rem ;
						
						.piliangdel{
							margin-right:0.8rem ;
							cursor: pointer;
							padding: 0.2rem 0.3rem;
							color: #999999;
							border: 1px solid #999999;
							border-radius:0.05rem ;
							font-size: 0.4rem;
							i{
								margin-right:0.2rem ;
							}
						}
						.daochushuju{
							cursor: pointer;
							padding: 0.2rem 0.3rem;
							color: #999999;
							border: 1px solid #999999;
							border-radius:0.05rem ;
							font-size: 0.4rem;
							i{
								margin-right:0.2rem ;
							}
						}
					}
				}
				.darenliebiao::after{
					content: "";
					display: block;
					clear: both;
				}
				
				.shujudou{
					padding: 4rem 0;
					margin-top:1rem ;
					text-align: center;
					img{
						width: 8rem;
					}
					span{
						display: block;
						color: #999;
						font-size: 0.35rem;
						margin: 1.5rem 0;
					}
				}
			}
		}
		.douyinhaonei::after{
			content: "";
			display: block;
			clear: both;
		}
	}
	.el-scrollbar/deep/ .el-select-dropdown__item{
		padding-left:0.5rem ;
	}
</style>